.player {
  width: 100%;
  height: 100%;
  position: relative;

  .bg {
    width: 100%;
    height: 100%;
    background: url("../../images/jinsha.jpg") no-repeat center/cover;
    -webkit-filter: blur(65px); /* Chrome, Opera */
    -moz-filter: blur(65px);
    -ms-filter: blur(65px);    
    filter: blur(65px);
    opacity: .6;
  }

  .layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(0,0,0,.35);

    .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 100;
      .box {
        width: 86%;
        position: absolute;
        top: 80px;
        bottom: 30px;
        left: 0;
        right: 0;
        // border: 1px solid red;
        margin: 0 auto;
        overflow: hidden;

        .top {
          height: 90%;
          // border-bottom: 1px solid red;
          .left-part {
            float: left;
            width: 70%;
            .opt-group {
              width: 100%;
              height: 40px;
              min-width: 832px;
              li {
                float: left;
               button {
                 padding: 0 40px;
                 height: 38px;
                 opacity: .8;
                 border:1px solid rgba(255,255,255,.2);
                 background: transparent;
                 color: #bdbdbe; 
                 font-size: 14px;
                 margin-right: 6px;
                 border-radius: 2px;
                 &:hover {
                   border-color: #fff;
                   color: #fff;
                  .favor {
                    background-position: -60px -20px;
                  }

                  .add {
                    background-position: -20px -20px;
                  }

                  .download {
                    background-position: -40px -240px;
                  }

                  .delete {
                    background-position: -100px -20px;
                  }
  
                  .clear {
                    background-position: -40px -300px;
                    opacity: 1;
                  }
                }

                i {
                  display: inline-block;
                  width: 16px;
                  height: 16px;
                  background: url('../../images/icon_sprite.png') no-repeat;
                  vertical-align: -3px;
                  margin-right: 6px;
                 }

                .favor {
                  background-position: -60px 0;
                  vertical-align: -4px;
                }

                .add {
                  background-position: -20px 0;
                }

                .download {
                  background-position: -40px -220px;
                }

                .delete {
                  background-position: -100px 0;
                }

                .clear {
                  width: 17px;
                  height: 17px;
                  background-position: -40px -300px;
                  opacity: .6;
                }


               }
                
              }
            }

            .song-table {
              height: 480px;
              overflow: auto;
              .song-list {
                width: 100%;
                color: rgba(225,225,225,.8);
                font-size: 14px;
                margin-top: 20px;
                // border: 1px solid blue;

                .table-title {
                  border-top: 1px solid rgba(255,255,255,.02);
                  border-bottom: 1px solid rgba(255,255,255,.02);

                  // border-top: 1px solid red;
                  // border-bottom: 1px solid red;
                }

                .bottom-line {
                  border-bottom: 1px solid rgba(255,255,255,.02);

                  // border-bottom: 1px solid red;
                }

                tr {
                  &:hover {
                    .opt-box {
                      display: block;
                    }

                    .songtime {
                      display: none;
                    }
                  }
                }
              
                th,td {
                  text-align: left;
                  height: 50px;
                  line-height: 50px;
                  position: relative;
                }


                .checkbox {
                  width: 14px;
                  height: 14px;
                  border: 1px solid rgba(225,225,225,.2);
                  position: absolute;
                  top: 17px;
                  left: 0;
                  input {
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    position: absolute;
                    left: 0;
                    top: 0;
                  }

                  .tick {
                    width: 14px;
                    height: 14px;
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: url('../../images/icon_sprite.png') no-repeat;
                    background-position: -60px -80px;
                  }

                  &:hover {
                    border-color: #fff;
                  }
                }

                .selected {
                  border-color: #fff;
                }

                .wave {
                  position: absolute;
                  top: 18px;
                  right: 12px;
                  width: 10px;
                  height: 10px;
                }

                .opt-box {
                  height: 40px;
                  position: absolute;
                  top: 5px;
                  // border: 1px solid yellow;
                  display: none;

                  i {
                    width: 36px;
                    height: 36px;
                    background: url('../../images/icon_list_menu.png') no-repeat;
                    display: inline-block;
                    margin-right: 8px;
                  }

                  .icon-play {
                    background-position: -80px 0;
                    &:hover {
                      background-position: -120px 0;
                    }
                  }

                  .icon-add {
                    background-position: -80px -80px;
                    &:hover {
                      background-position: -120px -80px;
                    }
                  }

                  .icon-share {
                    background-position: -80px -40px;
                    &:hover {
                      background-position: -120px -40px;
                    }
                  }

                  .icon-delete {
                    background-position: -80px -160px;
                    margin-right: 0;
                    &:hover {
                      background-position: -120px -160px;
                    }
                  }

                  // .icon-play-hover {
                  //   background-position: -120px 0;
                  // }

                  // .icon-add-hover {
                  //   background-position: -120px -80px;
                  // }

                  // .icon-share-hover {
                  //   background-position: -120px -40px;
                  // }
                }

                .opt-icons {
                  right: 0;
                }

                .opt-icons2 {
                  left: 0;
                }
              
              }
            }

            .song-table::-webkit-scrollbar {
              display: none;
            }
          }

          .right-part {
            float: right;
            text-align: center;

            .singer {
              height: 100%;
              width: 340px;
              text-align: center;
              position: relative;
              .singer-avatar {
                width: 186px;
                height: 186px;
                z-index: 10;
              }

              .album {
                position: absolute;
                top: 0;
                right: 53px;
              }
            }

            .key-index {
              color:rgba(225,225,225,.8);
              font-size: 14px;
              line-height: 28px;
              margin-top: 10px;

              .key {
                &:hover {
                  color: #fff;
                  cursor: pointer;
                }
              }
            }

            .lyric {
              color:rgba(225,225,225,.8);
              font-size: 14px;
              margin-top: 30px;
            }
          
          }
        }

        .pure {
          height: 90%;
          text-align: center;
          line-height: 58px;
          color: #fff;
          font-size: 22px;

          .lyric-box {
            height: 520px;
            overflow: auto;
          }

          .lyric-box::-webkit-scrollbar {
            display: none;
          }
        }

        .bottom {
          height: 35px;
          z-index: 100;
          clear: both;
          .play-group {
            float: left;
            i {
              vertical-align: middle;
              display: inline-block;
              background: url('../../images/player.png') no-repeat;
              opacity: .8;
              &:hover {
                opacity: 1;
              }
            }
            .play-prev {
              width: 19px;
              height: 20px;
              background-position: 0 -30px;
              vertical-align: -4px;
              opacity: .6;
            }

            .play-toggle {
              width: 21px;
              height: 29px;
              background-position: -30px 0;
              margin: 0 40px;
              
            }

            .play-next {
              width: 19px;
              height: 20px;
              background-position: 0 -52px;
              vertical-align: -4px;
            }
          }

          .play-step {
            float: left;
            // width: 800px;
            width: 52%;
            height: 100%;
            // border: 1px solid yellow;
            margin-left: 50px;

            .current-song {
              padding-top: 5px;
              height: 20px;
              p {
                font-size: 14px;
                color: rgba(225,225,225,.8);
              }

              .left-key {
                float: left;
              }

              .right-key {
                float: right;
              }

              .key {
                &:hover {
                  color: #fff;
                  cursor: pointer;
                }
              }
            }

            .step {
              width: 100%;
              height: 2px;
              background: rgba(255,255,255,.2);
              margin-top: 3px;
              position: relative;

              .pass {
                width: 20%;
                height: 100%;
                background: rgba(255,255,255,.7);
                position: absolute;
                top: 0;
                left: 0;

                .point {
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background: #fff;
                  position: absolute;
                  right: -5px;
                  top: -4px;
                }
              }
            }
          }

          .mode-group {
            float: right;
            i {
              background: url('../../images/player.png') no-repeat;
              display: inline-block;
              margin-left: 20px;
              opacity: .8;
              &:hover {
                opacity: 1;
              }
            }
            .play-mode {
              width: 26px;
              height: 25px;
              background-position: 0 -232px;
              top: 2px;
              position: relative;
            }

            .favor {
              width: 23px;
              height: 21px;
              background-position: 0 -96px;
            }

            .download {
              width: 22px;
              height: 21px;
              background-position: 0 -120px;
            }

            .comment {
              width: 24px;
              height: 24px;
              background-position: 0 -430px;
            }

            .display-mode {
              width: 74px;
              height: 26px;
              background-position: 0 -282px;
            }

            .voice {
              width: 26px;
              height: 21px;
              background-position: 0 -144px;
              position: relative;
              top: -2px;
            }

            .voice-control {
              width: 80px;
              display: inline-block;
              position: relative;
              top: -11px;
              margin-left: 5px;
              .long {
                width: 100%;
                height: 2px;
                background: rgba(255,255,255,.2);
                margin-top: 3px;
                position: relative;

                .pass {
                  width: 20%;
                  height: 100%;
                  background: rgba(255,255,255,.7);
                  position: absolute;
                  top: 0;
                  left: 0;
  
                  .point {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #fff;
                    position: absolute;
                    right: -5px;
                    top: -4px;
                  }
                }
              }
            }
          }


        }

  
      }
    }

  }

}